<!-- home.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户洞察平台</title>
    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 顶部欢迎信息 -->
<div class="header">
    <h1>客户洞察平台</h1>
    <div class="nav-links">
        <button id="home-btn"><i class="fas fa-home"></i> 首页</button>
        <button id="favorite-btn"><i class="fas fa-star"></i> 收藏</button>
        <button id="settings-btn"><i class="fas fa-cog"></i> 设置</button>
        <button href="#"><i class="fas fa-user"></i> 用户中心</button>
        <ul class="dropdown-menu" id="settings-dropdown" style="display: none;">
            <li onclick="adjustModelSettings('temperature')">调整模型温度</li>
            <li onclick="adjustModelSettings('other')">其他设置</li>
        </ul>
        <ul class="dropdown-menu" id="favorite-dropdown" style="display: none;">
            <li onclick="showFavoriteInsights()">收藏当前洞察</li>
            <li onclick="showHistoryInsights()">历史洞察</li>
        </ul>
    </div>
</div>

<!-- 中央图谱容器 -->
<main class="graph-container">
    <!-- 悬浮按钮组 -->
    <div class="floating-buttons">
        <button id="data-graph-btn" class="active">数据图谱</button>
        <button id="asset-overview-btn">资产概览</button>
    </div>
    <div id="network-home"></div>
    <!-- 洞察按钮 -->
    <div class="floating-button">
        <button id="start-insight-btn">开始洞察</button>
    </div>
    <!-- 资产概览容器 -->
    <div id="asset-overview" class="hidden">
        <div class="chart-container">
            <div class="chart" id="pie-chart"></div>
            <div class="chart" id="bar-chart"></div>
            <div class="chart" id="line-chart"></div>
            <div class="chart" id="heatmap"></div>
        </div>
    </div>
</main>


<!-- 右侧边栏 -->
<aside id="sidebar">
    <div class="sidebar-header">
        <h3>筛选条件</h3>
    </div>
    <div class="sidebar-content">
        <!-- 筛选条件 -->
        <div class="filter-group">
            <div class="filter-title" onclick="toggleFilterGroup(this)">
                <input type="checkbox" id="filter1">
                <label for="filter1">个人市场</label>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="sub-conditions">
                <label><input type="checkbox"> 基础信息</label>
                <label><input type="checkbox"> 资费</label>
                <label><input type="checkbox"> 终端</label>
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-title" onclick="toggleFilterGroup(this)">
                <input type="checkbox" id="filter2">
                <label for="filter2">家庭市场</label>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="sub-conditions">
                <label><input type="checkbox"> 家庭宽带</label>
                <label><input type="checkbox"> 魔百和</label>
                <label><input type="checkbox"> 智能组网</label>
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-title" onclick="toggleFilterGroup(this)">
                <input type="checkbox" id="filter3">
                <label for="filter3">政企市场</label>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="sub-conditions">
                <label><input type="checkbox"> 集团客户</label>
                <label><input type="checkbox"> 物联网</label>
                <label><input type="checkbox"> 行业网关</label>
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-title" onclick="toggleFilterGroup(this)">
                <input type="checkbox" id="filter4">
                <label for="filter4">新兴市场</label>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="sub-conditions">
                <label><input type="checkbox"> 咪咕视频</label>
                <label><input type="checkbox"> 移动云盘</label>
                <label><input type="checkbox"> 和包支付</label>
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-title" onclick="toggleFilterGroup(this)">
                <input type="checkbox" id="filter5">
                <label for="filter5">网络DPI</label>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="sub-conditions">
                <label><input type="checkbox"> 社交媒体</label>
                <label><input type="checkbox"> 视频网站</label>
                <label><input type="checkbox"> 阅读学习</label>
            </div>
        </div>
        <div class="filter-group">
            <div class="filter-title" onclick="toggleFilterGroup(this)">
                <input type="checkbox" id="filter6">
                <label for="filter6">位置信令</label>
                <i class="fas fa-chevron-down"></i>
            </div>
            <div class="sub-conditions">
                <label><input type="checkbox"> 出访</label>
                <label><input type="checkbox"> 驻留</label>
                <label><input type="checkbox"> 漫入</label>
            </div>
        </div>
        <!-- 更多条件 -->
    </div>
</aside>

<!-- 边栏伸缩按钮 -->
<button id="toggle-sidebar">
    <i class="fas fa-chevron-left"></i>
</button>

<script src="common_script.js"></script>
<script src="home_script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
</body>
</html>
